<template>
  <el-popover
    placement="bottom"
    width="400"
    trigger="manual"
    v-model="showPopover">
    <div class="close-title row-end">
      <el-button type="text"  @click="onClose">保存</el-button>
    </div>
    <div v-if="showPopover">
      <template v-for="col in inputHead">
        <div class="ha-col-item"  :key="col.prop||col.slot" v-if="col.slot != 'handle'">
          <el-checkbox @change="onHeadChange" v-model="col.checked">{{col.label}}</el-checkbox>
          <el-input @change="onHeadChange" v-model="col.w" placeholder="请输入列度"></el-input>
        </div>
      </template>
    </div>
    <span @click="showPopover = !showPopover" slot="reference" class="el-icon-setting" style="cursor: pointer;color:#409EFF;">{{ col.label }}</span>
  </el-popover>
</template>
<script>
import { deepClone } from '../../utils'
export default {
  name: 'HaTableHandle',
  model: { prop: 'newHead', event: 'upHead' },
  inject: ['saveHead'],
  props: {
    head: { type: Array, default: () => [] },
    newHead: { type: Array, default: () => [] },
    col: { type: Object, default: () => ({}) },
  },
  data: () => ({
    showPopover: false,   
    inputHead: [],
    time: 100,
  }),
  computed: {},
  watch: {
    head: {
      handler(val) {
        // let now = new Date().getTime()
        // if(now - this.time < 100) return
        // this.time = now
        this.inputHead = deepClone(val)
        this.onHeadChange()
      },
      deep: true,
      immediate: true,
    }
  },
  mounted() {},
  methods: {
    onHeadChange(v) {
      let now = new Date().getTime()
      if(now - this.time < 100) return
      this.time = now
      let tableHead = deepClone(this.inputHead).filter(el => el.checked)
      this.$emit('upHead', tableHead) 
    },

    onClose() {
      this.showPopover = false
      this.saveHead && this.saveHead(this.inputHead)
      this.$emit('close')
    }
  },
}
</script>
<style lang='scss' scoped>
 .ha-col-item{
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  .el-input{
    width: 180px;
  }
} 
.close-title{
  line-height: 20px;
  border-bottom: 1px solid #E9E9E9;
  padding: 0 5px 5px;
}
</style>